<template>
  <div class="page" style="">
    <div class="print_title">印章授权审核详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyCode }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.handlerId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">

          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.handlerDeptId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >印章所属公司:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.sealCompany_dictText?formData.sealCompany_dictText:formData.sealCompany }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >选择印章:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ ids_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24" style="margin: 4px 0;" v-if="dataSource && dataSource.length">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass">
          <span slot="sealType" slot-scope="text, record"> {{record.sealType_dictText?record.sealType_dictText: text}}</span>
          </a-table>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请授权公司:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyCompany_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请授权部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyDept_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请授权责任人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyAuthPerson_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >被委托方(印章保管人):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.trustee_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >授权印章使用期限:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.authDateStart }} ~ {{ formData.authDateEnd }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >项目名称:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.projectName_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >授权范围及授权说明:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.scopeContent }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
  import { getAction } from '@/api/manage'
  import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
  export default {
    props: {
      formBpm: {
        type: Boolean,
        default: false
      },
      formData1: {
        type: Object,
        default: () => {},
        required: true
      },
      formDataHistory: {
        type: Object,
        default: () => {},
        required: true
      }
    },
    components: {
      FileInfor,
      ProcessInfor
    },
    data() {
      return {
        formData: {},
        dataSource: [], // 印章列表
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 45,
            align: 'center',
            customRender: function (t, r, index) {
                return parseInt(index) + 1;
            }
          },
          {
            title: '印章编号',
            align: 'center',
            // width: 65,
            dataIndex: 'sealQualificationId'
          },
          {
            title: '名称',
            align: 'center',
            // width: 65,
            dataIndex: 'name'
          },
          {
            title: '印章类别',
            align: 'center',
            width: 65,
            dataIndex: 'sealType',
            scopedSlots: { customRender: 'sealType' },
          },
          {
            title: '申请人',
            align: 'center',
            width: 65,
            dataIndex: 'handlerId'
          },
          {
            title: '申请部门',
            align: 'center',
            // width: 65,
            dataIndex: 'handlerDeptId'
          },

        ],
        dataHistorySource: [], // 流程列表
        url: {
            historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
            queryByIds: '/api/erp/administration/seal/erpSealCertificationChangeRecord/queryByIds2', // 印章列表
            queryById: '/api/erp/administration/seal/erpSealAuthorizationInformation/queryById', // 獲取詳情
        },
        purchaseFile: [], // 附件
        ids_dictText: '' // 印章
      };
    },
    watch: {
      formData1: {
        handler (val) {
            if (val) {
              this.getHistoryList()
              // 获取详情
              this.detail()
              if (val.upload) {
                this.purchaseFile = val.upload.split(',')
              }
            }
        },
        immediate: true
      },
      formDataHistory: {
        handler (val) {
          if (val) {
              this.getHistoryList()
          }
        },
        immediate: true
      }
    },
    methods: {
      // 获取列表
      getHistoryList() {
        var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
        getAction(this.url.historyList, params).then(res => {
            if (res.success) {
                this.dataHistorySource = res.result.records || res.result
            }
        })
      },

      // 获取详情
      detail() {
        // 根据ID查询
        getAction(this.url.queryById, { id: this.formData1.id }).then((res) => {
          if (res.success) {
            this.formData = { ...res.result, ...this.formData1 }
            this.initObj()
            if (res.result.upload) {
                this.purchaseFile = res.result.upload.split(',')
              }
          }
        })
      },

      // 获取印章
      initObj() {
        this.ids_dictText = '';
        if (this.formData.ids && this.formData.ids.length > 0) {
          // ids = ids.split(',');
          let url = '';
          let param = {};
          url = this.url.queryByIds;
          param = { ids: this.formData.ids };
          getAction(url, param).then((res) => {
            if (res.success) {
              this.dataSource = res.result // 印章列表
              if (res.result && res.result.length) {
                res.result.map((value, index) => {
                  this.ids_dictText = (value.sealType_dictText?value.sealType_dictText :value.sealType) + ',' + this.ids_dictText
                })
                this.ids_dictText = this.ids_dictText.substr(0, this.ids_dictText.length - 1)
              }
            }
          });
        }
      },

      tableRowClass(record, index) {
        if (index == 0) {
            return 'rowClass';
        }
        return ''
      }
    }
  };
</script>
<style lang="less" scoped>
  .page{
    background: #ffffff;
    padding: 19px 28px 0 28px;
    width: 750px;
    .print_title{
        font-size: 15px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
    }
    .title {
        background: #EEEEEE;
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        padding: 11px 9px;
    }
    .content {
        font-size: 13px;
    }

    .title_table{
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
  }
  /deep/ .rowClass{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead th{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead tr{
      background: #EEEEEE;
  }
  /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
      margin: 0 0px;
  }
  /deep/ .ant-table-body tr {
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
  .content {
    font-size: 13px;
  }
</style>
